<template>
  <view class="upgrade-popup">
    <image class="header-bg" src="/static/images/success.png" mode="widthFix"></image>
    <view class="main">
      <view class="version">发现新版本 {{ versionName }}</view>
      <view class="content">
        <text class="title">更新内容</text>
        <view class="desc" v-html="versionDesc"></view>
      </view>
      <!-- 下载状态-进度条显示 -->
      <view class="footer" v-if="isStartDownload">
        <view class="progress-view" :class="{ active: !hasProgress }" @click="handleInstallApp">
          <!-- 进度条 -->
          <view v-if="hasProgress" style="height: 100%">
            <view class="txt">{{ percentText }}</view>
            <view class="progress" :style="setProStyle"></view>
          </view>
          <view v-else>
            <view class="btn upgrade force">{{ isDownloadFinish ? '立即安装' : '下载中...' }}</view>
          </view>
        </view>
      </view>
      <!-- 强制更新 -->
      <view class="footer" v-else-if="isForceUpdate">
        <view class="btn upgrade force" @click="handleUpgrade">立即更新</view>
      </view>
      <!-- 可选择更新 -->
      <view class="footer" v-else>
        <view class="btn close" @click="handleClose">以后再说</view>
        <view class="btn upgrade" @click="handleUpgrade">立即更新</view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { appType, downloadApp, getVersionInfo, installApp } from './upgrade'

// 数据定义
const isForceUpdate = ref(false) // 是否强制更新
const versionName = ref('') // 版本名称
const versionDesc = ref('') // 更新说明
const downloadUrl = ref('') // APP下载链接
const isDownloadFinish = ref(false) // 是否下载完成
const hasProgress = ref(false) // 是否能显示进度条
const currentPercent = ref(0) // 当前下载百分比
const isStartDownload = ref(false) // 是否开始下载
const fileName = ref('') // 下载后app本地路径名称

// 计算属性
const setProStyle = computed(() => {
  return {
    width: (510 * currentPercent.value) / 100 + 'rpx', // 510：按钮进度条宽度
  }
})

const percentText = computed(() => {
  const percent = currentPercent.value
  if (typeof percent !== 'number' || isNaN(percent)) return '下载中...'
  if (percent < 100) return `下载中${percent}%`
  return '立即安装'
})

// 生命周期钩子
onMounted(() => {
  init()
})

// 初始化获取最新APP版本信息
const init = async () => {
  // 模拟接口获取
  await getVersionInfo({ appType }).then((res) => {
    versionName.value = res.data.versionName
    versionDesc.value = res.data.updateMessage
    downloadUrl.value = res.data.apkUrl
    isForceUpdate.value = res.data.isForceUpdate
  })
}

// 更新
const handleUpgrade = () => {
  if (downloadUrl.value) {
    isStartDownload.value = true
    // 开始下载App
    downloadApp(downloadUrl.value, (current) => {
      // 下载进度监听
      hasProgress.value = true
      currentPercent.value = current
    })
      .then((file) => {
        // 下载完成
        isDownloadFinish.value = true
        fileName.value = file
        if (file) {
          // 自动安装App
          handleInstallApp()
        }
      })
      .catch((e) => {
        console.log(e, 'e')
      })
  } else {
    uni.showToast({
      title: '下载链接不存在',
      icon: 'none',
    })
  }
}

// 安装app
const handleInstallApp = () => {
  // 下载完成才能安装，防止下载过程中点击
  if (isDownloadFinish.value && fileName.value) {
    installApp(fileName.value, () => {
      // 安装成功,关闭升级弹窗
      uni.navigateBack()
    })
  }
}

// 关闭返回
const handleClose = () => {
  uni.navigateBack()
}
</script>

<style>
page {
  background: rgba(0, 0, 0, 0.5); /**设置窗口背景半透明*/
}
</style>

<style lang="scss" scoped>
.upgrade-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 1000; /* 确保弹窗在最上层 */
  box-sizing: border-box;
  width: 550rpx; /* 使用 rpx */
  height: 550rpx;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 20rpx; /* 使用 rpx */
  transform: translate(-50%, -50%);
}

.header-bg {
  width: 100%;
  margin-top: -400rpx; /* 使用 rpx */
}

.main {
  box-sizing: border-box;
  padding: 10rpx 30rpx 30rpx; /* 使用 rpx */
  .version {
    width: 100%;
    overflow: hidden;
    font-size: 30rpx; /* 使用 rpx */
    font-weight: 700;
    color: #026df7;
    text-align: center;
    text-overflow: ellipsis;
    letter-spacing: 1rpx; /* 使用 rpx */
    white-space: nowrap;
  }

  .content {
    margin-top: 30rpx; /* 使用 rpx */

    .title {
      font-size: 28rpx; /* 使用 rpx */
      font-weight: 700;
      color: #000000;
    }

    .desc {
      box-sizing: border-box;
      max-height: 80vh;
      margin-top: 20rpx; /* 使用 rpx */
      overflow-y: auto;
      font-size: 28rpx; /* 使用 rpx */
      color: #6a6a6a;
    }
  }

  .footer {
    position: relative;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 50rpx; /* 使用 rpx */

    .btn {
      position: relative;
      z-index: 999;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 246rpx; /* 使用 rpx */
      height: 96rpx; /* 使用 rpx */
      font-size: 32rpx; /* 使用 rpx */
      letter-spacing: 2rpx; /* 使用 rpx */
      border-radius: 10rpx; /* 使用 rpx */

      &.force {
        width: 500rpx; /* 使用 rpx */
      }

      &.close {
        margin-right: 25rpx; /* 使用 rpx */
        color: #000;
        border: 1px solid #e0e0e0;
      }

      &.upgrade {
        color: white;
        background-color: #026df7;
      }
    }

    .progress-view {
      position: relative;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      width: 510rpx; /* 使用 rpx */
      height: 90rpx; /* 使用 rpx */
      padding: 0px;
      overflow: hidden;
      background-color: #dcdcdc;
      border: none;
      border-radius: 6rpx; /* 使用 rpx */

      &.active {
        background-color: #026df7;
      }

      .progress {
        box-sizing: border-box;
        height: 100%;
        padding: 0px;
        background-color: #026df7;
        border: none;
        border-top-left-radius: 10rpx; /* 使用 rpx */
        border-bottom-left-radius: 10rpx; /* 使用 rpx */
      }

      .txt {
        position: absolute;
        top: 50%;
        left: 50%;
        font-size: 28rpx; /* 使用 rpx */
        color: #fff;
        transform: translate(-50%, -50%);
      }
    }
  }
}
</style>
